<template>
  <section>
    <div class="custorm--modelbox goodsnone-edit">
      <renohome-right-nav :custormItemData="custormItemData" @rightNavChange="rightNavChange"></renohome-right-nav>
      <div class="edit-form-item">
        <div class="form-label">颜色选择</div>
        <div class="stylebox flex-row flex-align-c ivu-color-picker"><span style="margin-right:13px;">背景</span>
          <el-color-picker
            class="ivu-input"
            v-model="custormItemData.style.bgcolor"
            size="mini"
          ></el-color-picker>
          <span class="ivu-input">{{custormItemData.style.bgcolor}}</span>
        </div>
      </div>

      <div class="edit-form-item">
        <div class="form-label">空白高度</div>
        <div class="flex-row flex-align-c">
            <el-slider :show-tooltip="false" style="width: 70%;" v-model="height" input-size="mini" :max="200">
            </el-slider>
            <div class="coupon-showslider">{{custormItemData.style.height}}px</div>
          </div>
      </div>
    </div>
  </section>
</template>

<script>
import defaultConfig from './utils/editConfig'
export default {
  mixins: [defaultConfig.mixins],
  props: {
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig
      }
    }

  },
  methods: {

  },
  computed: {
    height: {
      set(value) {
        this.custormItemData.style.height = value
      },
      get() {
        return this.conversionType('number', this.custormItemData.style.height)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.custorm--modelbox.goodsnone-edit {
}
</style>
